<template>
  <div class="global-container">
    <div class="global-header">
      <el-image
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/current.png')"
      ></el-image>
      <div class="title">
        系统配置
        <div class="title-content">
          提供系统权限配置信息管理，支持key、value形式全局环境变量配置。
        </div>
      </div>
    </div>
    <div class="searchDiv1">
      <div class="searchDiv global-operate">
        <span class="keyword">关键词：</span>
        <el-input
          v-model="searchInput"
          placeholder="请输入key、value、描述进行检索"
          clearable
          class="inputStyle"
          style="width: 20%"
          prefix-icon="el-icon-search"
          @input="filterSystemConfigList"
        />
        <div class="right-menu">
          <el-button
            style="width: 100px"
            type="primary"
            @click="openDialog('add', null)"
            class="el-button-primary-style"
          >
            添加
          </el-button>
        </div>
      </div>
    </div>
    <div class="servicePackageList">
      <div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @selection-change="tableSelectionChange"
          :cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
          :header-cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
          height="60vh"
        >
          <!--          <el-table-column type="selection"/>-->
          <el-table-column
            prop="attrKey"
            label="key"
            width="150"
          ></el-table-column>
          <el-table-column prop="attrValue" label="value" width="150" />
          <el-table-column label="描述">
            <template slot-scope="scope">
              <el-tooltip
                effect="dark"
                :content="scope.row.description"
                placement="bottom"
                popper-class="tooltipClass"
                :disabled="isShowTooltip"
              >
                <div class="descSpan" @mouseover="onMouseOver($event)">
                  {{ scope.row.description }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="创建时间" width="220" />
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="openDialog('update', scope.row)"
                style="margin-right: 10px; padding: 0"
              >
                修改
              </el-button>
              <el-popconfirm
                title="是否确认删除此系统变量？"
                @confirm="deleteEnv(scope.row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  style="color: #f56c6c; padding: 0"
                  >删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 10px; float: right">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="page.total"
          :page-size="page.pageSize"
          :page.sync="page"
          @current-change="changePage"
        />
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="addEnvDialogVisible"
      :before-close="closeAddEnvDialog"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <div style="display: flex; justify-content: space-around">
        <div style="width: 90%">
          <el-form
            :model="gvStoreSystemConfig"
            :rules="rules"
            ref="addEnvForm"
            label-width="80px"
            class="demo-ruleForm"
          >
            <el-form-item label="属性键" prop="attrKey">
              <el-input
                v-model="gvStoreSystemConfig.attrKey"
                :disabled="type === 'update'"
              ></el-input>
            </el-form-item>
            <el-form-item label="属性值" prop="attrValue">
              <el-input v-model="gvStoreSystemConfig.attrValue"></el-input>
            </el-form-item>
            <el-form-item label="属性描述" prop="description">
              <el-input
                type="textarea"
                v-model="gvStoreSystemConfig.description"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div style="display: flex; justify-content: right">
                <el-button
                  type="primary"
                  @click="addEnv"
                  class="el-button-primary-style"
                  v-show="type === 'add'"
                >
                  确定
                </el-button>
                <el-button
                  type="primary"
                  @click="updateEnv"
                  class="el-button-primary-style"
                  v-show="type === 'update'"
                >
                  确定
                </el-button>
                <el-button
                  @click="resetForm"
                  type="primary"
                  class="el-button-primary-style"
                >
                  取消
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SystemDeploy",
  data() {
    return {
      dialogTitle: "",
      type: "",
      searchInput: "",
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      tmpPage: {
        pageSize: 10,
        pageNum: 1,
        filterKey: "",
      },
      isShowTooltip: false,
      tableData: [],
      addEnvDialogVisible: false,
      gvStoreSystemConfig: {
        attrKey: "",
        attrValue: "",
        description: "",
      },
      rules: {
        attrKey: [
          { required: true, message: "请输入属性键", trigger: "blur" },
          {
            min: 2,
            max: 64,
            message: "长度在 2 到 50 个字符",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^([a-zA-Z0-9-])*$/,
            message: "属性键只能包含字母、数字、-",
            trigger: ["blur", "change"],
          },
          // {
          //   pattern: /^[a-zA-Z]([a-zA-Z0-9])*$/,
          //   message: "属性键只能包含字母、数字，且只能以字母开头",
          //   trigger: ["blur", "change"],
          // },
        ],
        attrValue: [
          { required: true, message: "请输入属性值", trigger: "blur" },
          {
            min: 2,
            max: 512,
            message: "长度在 2 到 50 个字符",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^([a-zA-Z0-9-])*$/,
            message: "属性值只能包含字母、数字、-",
            trigger: ["blur", "change"],
          },
          // {
          //   pattern: /^[a-zA-Z]([a-zA-Z0-9])*$/,
          //   message: "属性值只能包含字母、数字，且只能以字母开头",
          //   trigger: ["blur", "change"],
          // },
        ],
        // description: [
        //   {required: true, message: '请输入属性键', trigger: 'blur'},
        // ],
      },
    };
  },
  beforeMount() {
    this.getAllSystemConfigList();
  },
  methods: {
    onMouseOver(event) {
      const ev = event.target;
      const evWeight = ev.scrollWidth;
      const contentWidth = ev.clientWidth;
      if (evWeight > contentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },
    // 过滤展示
    getAllSystemConfigList() {
      this.$appStoreApi
        .getSystemConfigListByPage(this.tmpPage)
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.records;
          this.page.total = res.data.total;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    filterSystemConfigList() {
      this.tmpPage.filterKey = this.searchInput;
      this.tmpPage.pageNum = 1;
      this.tmpPage.pageSize = 10;
      this.getAllSystemConfigList();
    },
    // 处理更多
    tableSelectionChange(selectList) {
      this.selectImageList = selectList;
    },
    // 更换页数
    changePage(currentPage) {
      this.page.currentPage = currentPage;
      this.tmpPage.pageNum = currentPage;
      this.getAllImageByPage();
    },
    addEnv() {
      this.$refs.addEnvForm.validate((valid) => {
        if (valid) {
          this.$appStoreApi
            .addSystemConfig(this.gvStoreSystemConfig)
            .then((res) => {
              if (res && res.code === 200) {
                this.getAllSystemConfigList();
                this.gvStoreSystemConfig = {
                  attrKey: "",
                  attrValue: "",
                  description: "",
                };
                this.addEnvDialogVisible = false;
              }
            })
            .catch((error) => {
              this.$message.error(error.message);
            });
        } else {
          this.$message.warning("字段存在问题，请检查");
          return false;
        }
      });
    },
    updateEnv() {
      this.$refs.addEnvForm.validate((valid) => {
        if (valid) {
          this.$appStoreApi
            .updateSystemConfig(this.gvStoreSystemConfig)
            .then((res) => {
              if (res && res.code === 200) {
                this.getAllSystemConfigList();
                this.gvStoreSystemConfig = {
                  attrKey: "",
                  attrValue: "",
                  description: "",
                };
                this.addEnvDialogVisible = false;
              }
            })
            .catch((error) => {
              this.$message.error(error.message);
            });
        } else {
          this.$message.warning("有字段未填充，请先补充完整");
          return false;
        }
      });
    },
    resetForm() {
      this.addEnvDialogVisible = false;
      this.gvStoreSystemConfig = {
        attrKey: "",
        attrValue: "",
        description: "",
      };
    },
    closeAddEnvDialog(done) {
      this.gvStoreSystemConfig = {
        attrKey: "",
        attrValue: "",
        description: "",
      };
      done();
    },
    openDialog(type, row) {
      this.addEnvDialogVisible = true;
      this.type = type;
      if (type === "add") {
        this.dialogTitle = "添加系统变量";
      } else if (type === "update") {
        this.dialogTitle = "修改系统变量";
        this.gvStoreSystemConfig = JSON.parse(JSON.stringify(row));
      }
    },
    deleteEnv(row) {
      this.$appStoreApi
        .deleteSystemConfig([row.id])
        .then((res) => {
          if (res && res.code === 200) {
            this.$message.success("删除成功");
            this.getAllSystemConfigList();
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
  },
};
</script>

<style scoped>
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #304156;
}
</style>
